<template>
	
	<div id="container"></div>
	<TeleportContainer />
	d
</template>
<script>
	import config from "@/config/config.js";
	import xcHttpUtils from '@/library/xcore/js/XcHttpUtils.js';
	import xcViewUtils from '@/library/xcore/js/XcViewUtils.js';
	import {
		xsStringUtils,
		xsDateUtils,
		xsArrayUtils
	} from 'xstack-for-javascript';

	import {
		defineComponent
	} from 'vue'
	//import ProgressNode from './components/ProgressNode.vue'
	import {
		Graph
	} from '@antv/x6'
	import {
		register,
		getTeleport
	} from '@antv/x6-vue-shape'

	register({
		shape: 'custom-vue-node',
		width: 100,
		height: 100,
		//component: ProgressNode,
	})
	 const TeleportContainer = getTeleport()
	//const TeleportContainer = defineComponent(getTeleport());


	export default {
 
		components: {
			TeleportContainer,
		},
		data() {
			return {
				config: config,
				xsStringUtils: xsStringUtils,
				xsDateUtils: xsDateUtils,
				sp: {},
				sr: {},
				control: {},
				data2: {
					nodes: [{
							id: 'node1',
							shape: 'rect',
							x: 40,
							y: 40,
							width: 100,
							height: 40,
							label: 'hello',
							attrs: {
								// body 是选择器名称，选中的是 rect 元素
								body: {
									stroke: '#8f8f8f',
									strokeWidth: 1,
									fill: '#fff',
									rx: 6,
									ry: 6,
								},
							},
						},
						{
							id: 'node2',
							shape: 'rect',
							x: 160,
							y: 180,
							width: 100,
							height: 40,
							label: 'world',
							attrs: {
								body: {
									stroke: '#8f8f8f',
									strokeWidth: 1,
									fill: '#fff',
									rx: 6,
									ry: 6,
								},
							},
						},
					],
					edges: [{
						shape: 'edge',
						source: 'node1',
						target: 'node2',
						label: 'x6',
						attrs: {
							// line 是选择器名称，选中的边的 path 元素
							line: {
								stroke: '#8f8f8f',
								strokeWidth: 1,
							},
						},
					}, ],
				}
			}
		},
		onShow() {
			let that = this;
			that.xinit();
		},
		methods: {
			xinit() {
				let that = this;
				that.$nextTick(function(){
					that.public_show();
				},1000);
			},
			public_show() {
				let that = this;
				const graph = new Graph({
					container: document.getElementById('container'),
					background: {
						color: '#F2F7FA',
					},
					autoResize: true,
				});
				graph.addNode({
					shape: 'custom-vue-node',
					x: 100,
					y: 60,
				}); 
				graph.fromJSON(that.data2);  
			},
			public_reset() {
				let that = this;
				that.public_show();
			},
			control_click() {
				let that = this;
				that.$emit('update:modelValue', "Hello World!");
			}
		}
	}
</script>

<style lang="scss">
#container{
	height:calc(100vh - 96px) !important;
}
</style>